import React from 'react';
import Wrapper from '../_Wrapper';
import {Card, List, Button, Affix, Icon, Divider, Drawer, Form, Checkbox, Skeleton, Avatar} from 'antd';
import { MainRow,  } from '../../components/'
import { Anchor } from 'antd';
const { Link } = Anchor;
import style from './index.less'
import {contact} from '../../store';

export default class Page extends React.Component {
    state = {
        data: contact,
        showMsg: false,
        showItem: 0,
        childrenDrawer: false,
        loading: true,
        anchor: [
            'A', 'B', 'C', 'D', 'E'
        ]
    }
    componentDidMount () {
        setTimeout(() => {
            this.setState({loading:false})
        }, 1000)
    }
    onChildrenDrawerClose = () => {
        this.setState({
            childrenDrawer: false
        })
    }
    render () {
        return (
            <Wrapper
                style={{background: '#F0F0F0'}}
                header={
                    <Card style={{borderRadius: 0}} title={<h3 style={{background:'#fff', padding: "0 20px", fontSize: 22}}>通讯录</h3>} bodyStyle={{padding: 0}} bordered={false} headStyle={{border: 'none', padding:0}}>
                        <MainRow 
                            row={
                                <div style={{textAlign: "left", width: '100%', padding: "0 15px"}}>
                                    <Button size="small" shape="round" style={{marginRight: 10}} icon="delete">删除</Button>
                                    <Button size="small" shape="round" style={{marginRight: 10}} icon="share-alt">转发</Button>
                                    <Button size="small" shape="round" style={{marginRight: 10}} type="primary" icon="plus">添加</Button>
                                </div>
                            }
                        />
                    </Card>
                }
            >
                {
                    this.state.anchor.map(
                        (anchor) => (
                            <List
                                extra={'1234'}
                                key={anchor}
                                id={anchor}
                                grid={{ gutter: 16, column: 3 }}
                                header={
                                    <Affix target={() => document.getElementById('container')}>
                                        <div style={{fontSize: 18, background:'rgb(240, 240, 240)', padding: 5}} >{anchor}</div>
                                    </Affix>
                                }
                                dataSource={this.state.data}
                                renderItem={(item, index) => (
                                    <List.Item key={index.toString()}>
                                        <Card  actions={[ <Checkbox style={{marginLeft: 10}} onClick = {() => {this.setState({showItem: index, showMsg: true})} }></Checkbox> , <Icon type="edit" />, <Icon type="delete" />]} bordered={false} >
                                            <Skeleton loading={this.state.loading} avatar active paragraph={{ rows: 1 }}>
                                                <Card.Meta
                                                    avatar={<Avatar size={40} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                                    title={item.name}
                                                    description={item.mail}
                                                />
                                            </Skeleton>
                                            
                                        </Card>
                                    </List.Item>
                                )}
                            />
                        )
                    )
                }
                <Anchor style={{position:"fixed", right: 20, zIndex: 10, top:300 }} className={style.anchor} getContainer={() => document.getElementById('container')|| document.body} >
                    {this.state.anchor.map((item) => <Link className={style.anchorLink} key={item} href={`#${item}`} title={item} />)}
                </Anchor>
            </Wrapper>
        )
    }
}